<template>
  <div class="mining-tools">
    <BBtn icon="icon-renyuan" type="person" text="人员" @click="(val) => filterScene('person', val)" />
    <BBtn icon="icon-jizhan" type="baseStation" text="基站" @click="(val) => filterScene('baseStation', val)" />
    <BBtn icon="icon-shebeichuanganqi" type="sensor" text="传感器" @click="(val) => filterScene('sensor', val)" />
    <BBtn icon="icon-shexiangtou" type="camera" text="摄像头" @click="(val) => filterScene('camera', val)" />
    <BBtn icon="icon-gongzuomian" type="workArea" text="工作面" @click="(val) => filterScene('workArea', val)" />
  </div>
</template>
<script setup lang="ts">
import BBtn from '@/components/b-btn.vue'
import { useActiveObject, type ActiveFilter } from '@/store/activeObject'
import { useViewportStore } from '@/store/viewport'
import { storeToRefs } from 'pinia'

const activeObjectStore = useActiveObject()
const {activeFilter} = storeToRefs(activeObjectStore)
const viewportStore = useViewportStore()
const { publicGroup } = storeToRefs(viewportStore)
function filterScene(type: ActiveFilter, active: boolean) {
  if (active) {
    activeFilter.value.push(type)
  } else {
    activeFilter.value = activeFilter.value.filter((item) => item !== type)
  }

  if (type === 'workArea') {
    publicGroup.value.children.forEach((item) => {
      if (item.name === '工作面') {
        item.visible = active
      }
    })
  }
}
</script>
<style scoped lang="scss">
.mining-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
